<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>admin</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- main-->
    <link rel="stylesheet" href="css/main.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- jQuery Circle-->
    <link rel="stylesheet" href="css/grasp_mobile_progress_circle-1.0.0.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <style>
      #upload_main_right,#upload_main_left{margin-top: 30px;padding: 30px;}
      #upload_main_right{min-height: 300px;color: #fff;display: block;margin-top: 0;}
      #upload_main_left > p{padding: 10px;margin: 0;}
    </style>
  </head>
  <body>
    <!-- Side Navbar -->
    <nav class="side-navbar">
      <div class="side-navbar-wrapper">
        <!-- Sidebar Header    -->
        <div class="sidenav-header d-flex align-items-center justify-content-center">
          <!-- User Info-->
          <div class="sidenav-header-inner text-center"><img src="img/avatar-7.jpg" alt="person" class="img-fluid rounded-circle">
            <h2 class="h5">测试用户</h2><span>测试用户</span>
          </div>
          <!-- Small Brand information, appears on minimized sidebar-->
          <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center"> <strong>B</strong><strong class="text-primary">D</strong></a></div>
        </div>
        <!-- Sidebar Navigation Menus-->
        <div class="main-menu">
          <h5 class="sidenav-heading">Main</h5>
          <ul id="side-main-menu" class="side-menu list-unstyled">                  
            <li><a href="index.html"> <i class="icon-home"></i>训练场                             </a></li>
            <li><a href="blog.html"> <i class="icon-form"></i>Wiki                             </a></li>
          </ul>
        </div>
        <!-- <div class="admin-menu">
          <h5 class="sidenav-heading">Second menu</h5>
          <ul id="side-admin-menu" class="side-menu list-unstyled"> 
            <li> <a href="#"> <i class="icon-screen"> </i>Demo</a></li>
            <li> <a href="#"> <i class="icon-flask"> </i>Demo
                <div class="badge badge-info">Special</div></a></li>
            <li> <a href=""> <i class="icon-flask"> </i>Demo</a></li>
            <li> <a href=""> <i class="icon-picture"> </i>Demo</a></li>
          </ul>
        </div> -->
      </div>
    </nav>
    <div class="page">
      <!-- navbar-->
      <header class="header">
        <nav class="navbar">
          <div class="container-fluid">
            <div class="navbar-holder d-flex align-items-center justify-content-between">
              <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
                  <div class="brand-text d-none d-md-inline-block"><span>简树控制台</span></div></a></div>
              <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                <!-- Log out-->
                <li class="nav-item"><a href="../index.html" class="nav-link logout"> <span class="d-none d-sm-inline-block">Logout</span><i class="fa fa-sign-out"></i></a></li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <!-- main section -->
      <section class="upload_main container">

        <!-- 消息框 -->
        <div class="modal" tabindex="-1" role="dialog" id="alert_boot">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>请检查信息是否完整！</p>
              </div>
            </div>
          </div>
        </div>


        <div class="row">
          <div class="col-md-6" id="upload_main_left" style="margin: 0 auto;">
            <p id="customFile_info">请上传数据源</p>
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="customFile">
              <label class="custom-file-label" for="customFile" id="select_name">选择文件</label>
            </div>
            <p id="select_info">选择模型</p>
            <div class="form-group">
              <select class="form-control" id="exampleFormControlSelect1">
                <option>请选模型</opStion>
                <option value="scoreWaraning">成绩预警模型(随机森林)</opStion>
                <option disabled>随机森林</opStion>
                <option disabled>K近邻</option>
                <option disabled>逻辑回归</option>
              </select>
            </div>
            <br>
            <button class="btn btn-danger" id="play_run_btn">开始训练</button>
            
          </div>
          <div class="col-md-12" id="upload_main_right" style="display: none;">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>可能挂科人员(序号)</th>
                </tr>
              </thead>
              <tbody id="tBody">
                
              </tbody>
            </table>
          </div>
        </div>
        <script>
          var play_run_btn=document.getElementById('play_run_btn');
          var upload_main_right=document.getElementById('upload_main_right');
          var mx=document.getElementById('exampleFormControlSelect1');
          var select_info=document.getElementById('select_info');
          var customFile=document.getElementById('customFile');
          var customFile_info=document.getElementById('customFile_info');
          var select_name=document.getElementById('select_name');
          var alert_boot=document.getElementById('alert_boot');
          var close=document.getElementById('close');
              
          // window.onclick=function(){
          //   // upload_main_right.style.display='none';
          //   if(mx.value!='请选择模型'){
          //       select_info.style.color='#333';
          //     }else{
          //       select_info.style.color='brown';
          //     }
          //   if(customFile.value==''){
          //       customFile_info.style.color='brown'
          //     }else{
          //       customFile_info.style.color='#333';
          //     }
          // }

          play_run_btn.onclick=function(){
            // if(upload_main_right.style.display=='none'){
            //     upload_main_right.style.display='block';
            //   }

            if(customFile.value=='' || mx.value=='请选模型'){
              alert_boot.style.display='block';
              return false
            }
          }

          close.onclick=function(){
            alert_boot.style.display='none';
          }
          window.onclick=function(){
            if(customFile.value==''){
              select_name.innerText='选择文件';
            }else{
              select_name.innerText=customFile.value;
            }
          }
          

        </script>
      </section>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/charts-home.js"></script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>